import { getAllCourseList } from '@/views/api/course/allCourse'
import { getAllUserInfo } from '@/views/api/system/user/user'
import userManageApi from '@/views/api/system/user/userManage'
import commentApi from '@/views/api/comment/comment'
import { VEmojiPicker } from "v-emoji-picker";
import userComment from '@/components/UserComment';
import HeadPortraits from '@/components/HeadPortraits';
import CommentContent from '@/components/CommentContent'
import { mapGetters } from "vuex";
import thumbsApi from "@/views/api/comment/thumbs";

export default {
    components: {
        VEmojiPicker,
        userComment,
        HeadPortraits,
        CommentContent
    },
    data() {
        return {
            list: [],
            courseList: [],
            content: '',
            emojiDialog: false,
            isReload: false,
            commentList: [],
            userList: [],
            studentData: [],
            total: null,
            loading: false,
            commentThumbs: [],
            childReload: false
        }
    },
    created() {
        this.init()
    },

    computed: {
        ...mapGetters(['userInfo', 'courseInfo']),
    },
    methods: {
        init() {
            this.fetchData()
            this.getThumbs()
        },
        async fetchData() {
            this.loading = true
            const [ course, user ] = await Promise.all([getAllCourseList(), getAllUserInfo()])
            this.courseList = course.data
            this.list = this.courseList.filter(item => {
                if (this.userInfo.userType === 'administrator') return item
                else  {
                    if (this.userInfo.courseIds.includes(item.id)) {
                        return item
                    }
                }
            })
            if (JSON.stringify(this.courseInfo) === '{}') {
                this.$store.commit('course/SET_COURSE', this.list[0])
            }
            this.isReload = false

            this.userList = this.userSort(user.data)
            this.studentData = this.userList.filter(item => this.courseInfo.studentIds.includes(item.id))
            this.getComment();
        },
        // 点赞
        getThumbs() {
            thumbsApi.getLikeComments({ userId: this.userInfo.id }).then(response => {
                this.commentThumbs = response.data
            })
        },
        // 获取评论列表
        getComment() {
            commentApi.getCommentList({ courseId: this.courseInfo.id }).then(response => {
                this.commentList = response.data
                this.total = this.commentList.length
                this.commentList.forEach(item => {
                    item.createTime = new Date(item.createTime).toLocaleString().replace(/\//g, '-')
                    item.userInfo = this.userList.find(value => value.id === item.userId)
                })
                this.loading = false
            })
        },
        // 排序，学生管理员在前，普通学生在后
        userSort(arr) {
            let admin = []
            let common = []
            arr.forEach(item => {
                item.admin ? admin.push(item) : common.push(item)
            })
            return [...admin, ...common]
        },
        // 监听子组件删除事件，删除成功刷新列表
        remove(remove) {
            if (remove) {
                this.fetchData()
            }
        },
        selectCourse(value) {
            this.$store.commit('course/SET_COURSE', value)
            this.init()
            location.reload()
        },
        makeAdmin(row) {
            row.admin = !row.admin
            userManageApi.update(row).then(() => {
                this.fetchData()
            })
        },
        selectEmoji(emoji) {
            let input = document.querySelector('.el-textarea__inner')
            let startPos = input.selectionStart
            let endPos = input.selectionEnd
            let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
            input.value = resultText
            input.focus()
            input.selectionStart = startPos + emoji.data.length
            input.selectionEnd = startPos + emoji.data.length
            this.text = resultText
        },
        goBack() {
            switch (sessionStorage.getItem('role')) {
                case 'administrator': this.$router.push('/layout'); break;
                case 'teacher': this.$router.push('/setCourse'); break;
                default: this.$router.push('/joinCourse'); break;
            }
        },
        reload(value) {
            this.isReload = value
            // this.$store.commit('course/SET_COURSE', '')
            this.init()

        }
    }
}
